<template>
	<!-- 退货待处理 -->
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="60%">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="20" class="mb20">
				<el-col :span="12">
					<el-form-item label="商品名称">
						<el-input v-model="form.goods_title" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="售价">
						<el-input v-model="form.goods_option_price" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" class="mb20">
				<el-col :span="12">
					<el-form-item label="成本价">
						<el-input v-model="form.cost_price" disabled />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="购买数量">
						<el-input v-model="form.num" disabled />
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-row :gutter="20" class="mb20">
				<el-col :span="12">
					<el-form-item label="售后数量">
						<el-input v-model="form.returnNum" disabled />
					</el-form-item>
				</el-col>
			</el-row> -->
			<el-row class="mb20">
				<el-col>
					<el-form-item label="售后方式">
						<el-radio-group v-model="form.after_sale_type">
							<el-radio :label="3">售后换货</el-radio>
							<el-radio :label="1">改成售后退款</el-radio>
							<el-radio :label="2">改成售后退货</el-radio>
							<el-radio :label="4">改成售后补单</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="Number(form.after_sale_type) == 3">
				<el-col>
					<el-form-item label="处理结果">
						<el-radio-group v-model="form.refund_status2">
							<el-radio :label="1">同意换货</el-radio>
							<el-radio :label="2">拒绝换货</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="Number(form.after_sale_type) == 3 && Number(form.refund_status2) == 1" class="mb20">
				<el-col>
					<el-form-item label="退货地址" prop="returnAddrId">
						<el-select v-model="form.returnAddrId" placeholder="请选择地址" class="w100">
							<el-option
								v-for="item in addressOptions"
								:key="item.id"
								:label="item.province + item.city + item.county + item.address"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="结果说明" prop="remark">
						<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.remark" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb10">
				<el-col>
					<el-form-item label="售后记录" />
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-table :data="logList" border style="width: 100%">
						<el-table-column label="完成时间" align="center">
							<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
						</el-table-column>
						<el-table-column label="描述" align="center">
							<template #default="scope">
								<span style="font-weight: bold">
									{{ afterSalesOrderDescri(1, scope.row.descri, scope.row.price) }}
								</span>
								<br />
								<!-- 卖家退回地址 -->
								<span v-if="scope.row.address && scope.row.address != ',,,,,'"> 地址：{{ scope.row.address }} </span>
								<br v-if="scope.row.address && scope.row.address != ',,,,,'" />
								<!-- 买家快递单号 -->
								<span v-if="scope.row.freight_name"> 快递公司：{{ scope.row.freight_name }} </span>
								<br v-if="scope.row.freight_name" />
								<span v-if="scope.row.freight_sn"> 快递单号：{{ scope.row.freight_sn }} </span>
								<br v-if="scope.row.freight_sn" />
								<span v-if="scope.row.remark" style="color: red"> 原因：{{ scope.row.remark }} </span>
								<br />
							</template>
						</el-table-column>
						<el-table-column label="附件" align="center">
							<template #default="scope">
								<el-image
									v-for="(item, index) in scope.row.images"
									:key="index + ''"
									:src="item"
									:preview-src-list="scope.row.images"
									:style="`width:60px;height:60px;margin-right: 10px;`"
									fit="scale-down"
									:z-index="3000"
								/>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
			<el-button @click="onCancel">取 消</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { afterExamine, afterGoodsAddressSelect, afterOrderRecord } from '/@/api/admin1';
import { afterSalesOrderDescri, timeDictionary } from '/@/utils/dictionaryTranslation';

export default {
	name: 'handleExchangeDialog',
	setup() {
		const state = reactive({
			title: '退款待处理',
			open: false,
			form: {} as any,
			rules: {
				returnAddrId: [{ required: true, message: '请选择退货地址', trigger: ['blur', 'change'] }],
				remark: [{ required: true, message: '结果说明不能为空', trigger: 'blur' }],
			}, // 表单校验
			logList: [],
			addressOptions: [] as any,
			submitLoading: false,
		});

		const formRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					console.log('state.form', state.form);
					if (state.form.after_sale_type == 3) {
						let addressInfo = state.addressOptions.find((item: any) => item.id == state.form.returnAddrId);
						_afterExamine({
							sale_id: state.form.sale_id,
							after_sale_type: state.form.after_sale_type,
							refund_status2: state.form.refund_status2,
							remark: state.form.remark,
							...addressInfo,
						});
					} else {
						_afterExamine({
							sale_id: state.form.sale_id,
							after_sale_type: state.form.after_sale_type,
							remark: state.form.remark,
						});
					}
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			reset();
			callback = fn;
			state.open = true;
			state.title = config.title;
			state.form = config.data;
			_afterGoodsAddressSelect({ goods_id: config.goods_id });
			_afterOrderRecord(config.data);
		};
		// 表单重置
		const reset = () => {
			state.form = {
				goods_title: '',
				goods_option_price: '',
				cost_price: '',
				num: '',
				returnNum: '',
				after_sale_type: '',
				refund_status2: '',
				returnAddrId: '',
				remark: '',
				sale_id: '',
			};
			(formRef.value as any)?.resetFields();
		};

		/********** 网络事件 **********/
		// 售后审核（一审）
		const _afterExamine = (_data: object) => {
			afterExamine(_data)
				.then((res: any) => {
					console.log('售后审核（一审）', res);
					ElMessage.success('处理成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};
		// 查看退换货地址
		const _afterGoodsAddressSelect = (_data: object) => {
			afterGoodsAddressSelect(_data).then((res: any) => {
				console.log('查看退换货地址', res);
				state.addressOptions = res.data.list;
			});
		};
		// 售后记录
		const _afterOrderRecord = (_data: object) => {
			afterOrderRecord(_data).then((res: any) => {
				console.log('售后记录', res);
				state.logList = res.data.list.map((item: any) => {
					let images = item.images ? item.images.split(',') : [];
					return {
						...item,
						images,
					};
				});
			});
		};

		return {
			formRef,
			onSubmitForm,
			openDialog,
			onCancel,
			afterSalesOrderDescri,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
